<template>
	<view class="container">
		<!-- <view class="" v-if="evaluationData.length>0"> -->

		<mescroll-uni
			ref="mescrollRef" 
			@init="mescrollInit" 
			@down="downCallback"
			:up="upOption" 
			@up="getEvaluateList"
			:fixed="true"
		>
			<view class="collection-item" v-for="(item,index) in evaluationData" :key="index">
				<view class="mix-rating-item b-b">
					<view class="wrap">
						<view class="avatar-wrap">
							<image v-if="!item.headimgurl" class="avatar" src="/static/img/mine_def_touxiang_3x.png">
							</image>
							<image class="avatar" :src="item.headimgurl" mode="aspectFill"></image>
						</view>
						<view class="right fill column">
							<view class="row">
								<text class="nickName"> {{
										!item.nickName ? '匿名' : 
										(item.nickName)
								}} </text>
								<text class="iconfont iconxing1" :class="{active: sIndex < item.descriptionMatchPoint}"
									v-for="(sItem, sIndex) in 5" :key="sIndex"></text>
							</view>
							<text class="con">{{ item.evaluationText ||''}}</text>
							<view class="pic-wrap">
								<view class="picImg" v-if="item.evaluationUrl1">
									<image
										v-if="imgType.includes(item.evaluationUrl1.split('.')[item.evaluationUrl1.split('.').length-1])"
										:src="item.evaluationUrl1" class="tui-item-img pic"
										@tap.stop="previewImage(item.evaluationUrl1)"></image>
									<template v-else>
										<!-- #ifndef APP-PLUS -->
										<video :src="item.evaluationUrl1" :autoplay='false' :show-fullscreen-btn="true"
											show-center-play-btn controls class="tui-item-img pic"></video>
										<!-- #endif -->
										<!-- #ifdef APP-PLUS -->
										<view class="video-black" @tap="videoshow(item.evaluationUrl1)">
											<image class="black-img" :src="item.evaluationUrl1+'?x-oss-process=video/snapshot,t_0,f_jpg'" mode="aspectFill"></image>
											<image src="~@/static/img/videoPlay.png" mode="aspectFill"
												class="video-icon"></image>
										</view>
										<!-- #endif -->
									</template>
								</view>
								<view class="picImg" v-if="item.evaluationUrl2">
									<image
										v-if="imgType.includes(item.evaluationUrl2.split('.')[item.evaluationUrl2.split('.').length-1])"
										:src="item.evaluationUrl2" class="tui-item-img pic"
										@tap.stop="previewImage(item.evaluationUrl2)"></image>
									<template v-else>
										<!-- #ifndef APP-PLUS -->
										<video :src="item.evaluationUrl2" :autoplay='false' :show-fullscreen-btn="true"
											show-center-play-btn controls class="tui-item-img pic"></video>
										<!-- #endif -->
										<!-- #ifdef APP-PLUS -->
										<view class="video-black" @tap="videoshow(item.evaluationUrl2)">
											<image class="black-img" :src="item.evaluationUrl2+'?x-oss-process=video/snapshot,t_0,f_jpg'" mode="aspectFill"></image>
											<image src="~@/static/img/videoPlay.png" mode="aspectFill"
												class="video-icon"></image>
										</view>
										<!-- #endif -->
									</template>
								</view>
								<view class="picImg" v-if="item.evaluationUrl3">
									<image
										v-if="imgType.includes(item.evaluationUrl3.split('.')[item.evaluationUrl3.split('.').length-1])"
										:src="item.evaluationUrl3" class="tui-item-img pic"
										@tap.stop="previewImage(item.evaluationUrl3)"></image>
									<template v-else>
										<!-- #ifndef APP-PLUS -->
										<video :src="item.evaluationUrl3" :autoplay='false' :show-fullscreen-btn="true"
											show-center-play-btn controls class="tui-item-img pic"></video>
										<!-- #endif -->
										<!-- #ifdef APP-PLUS -->
										<view class="video-black" @tap="videoshow(item.evaluationUrl3)">
											<image class="black-img" :src="item.evaluationUrl3+'?x-oss-process=video/snapshot,t_0,f_jpg'" mode="aspectFill"></image>
											<image src="~@/static/img/videoPlay.png" mode="aspectFill"
												class="video-icon"></image>
										</view>
										<!-- #endif -->
									</template>
								</view>
								<!-- <image class="pic" v-if="item.evaluationUrl1"
									:src="imgSrc+item.evaluationUrl1"
								></image>
								<image class="pic"
									v-if="item.evaluationUrl2"
										:src="imgSrc+item.evaluationUrl2"
								></image>
								<image class="pic"
									v-if="item.evaluationUrl3"
										:src="imgSrc+item.evaluationUrl3"
								></image> -->
							</view>
							<view class="bot">
								<text class="time">{{item.evaluateDate}}</text>
							</view>
							<view v-if="item.addCommentDate" class="addData-wrap">
								<view class="addDataClass">追加评价：{{ item.addComment ||''}}</view>
								<view class="pic-wrap">
									<!-- <image class="pic" 
										v-if="item.addEvaluationUrl1"
											:src="imgSrc+item.addEvaluationUrl1"
									></image>
									<image class="pic"
										v-if="item.addEvaluationUrl2"
											:src="imgSrc+item.addEvaluationUrl2"
									></image>
									<image class="pic"
									v-if="item.addEvaluationUrl3"
										:src="imgSrc+item.addEvaluationUrl3"
								></image> -->
									<view class="picImg" v-if="item.addEvaluationUrl1">
										<image @tap.stop="previewImage(item.addEvaluationUrl1)"
											v-if="imgType.includes(item.addEvaluationUrl1.split('.')[item.addEvaluationUrl1.split('.').length-1])"
											:src="item.addEvaluationUrl1" class="tui-item-img pic"></image>
										<template v-else>
											<!-- #ifndef APP-PLUS -->
											<video :src="item.addEvaluationUrl1" :autoplay='false'
												:show-fullscreen-btn="true" show-center-play-btn controls
												class="tui-item-img pic"></video>
											<!-- #endif -->
											<!-- #ifdef APP-PLUS -->
											<view class="video-black" @tap="videoshow(item.addEvaluationUrl1)">
												<image class="black-img" :src="item.addEvaluationUrl1+'?x-oss-process=video/snapshot,t_0,f_jpg'" mode="aspectFill"></image>
												<image src="~@/static/img/videoPlay.png" mode="aspectFill"
													class="video-icon"></image>
											</view>
											<!-- #endif -->
										</template>
									</view>
									<view class="picImg" v-if="item.addEvaluationUrl2">
										<image @tap.stop="previewImage(item.addEvaluationUrl2)"
											v-if="imgType.includes(item.addEvaluationUrl2.split('.')[item.addEvaluationUrl2.split('.').length-1])"
											:src="item.addEvaluationUrl2" class="tui-item-img pic"></image>
										<template v-else>
											<!-- #ifndef APP-PLUS -->
											<video :src="item.addEvaluationUrl2" :autoplay='false'
												:show-fullscreen-btn="true" show-center-play-btn controls
												class="tui-item-img pic"></video>
											<!-- #endif -->
											<!-- #ifdef APP-PLUS -->
											<view class="video-black" @tap="videoshow(item.addEvaluationUrl2)">
												<image class="black-img" :src="item.addEvaluationUrl2+'?x-oss-process=video/snapshot,t_0,f_jpg'" mode="aspectFill"></image>
												<image src="~@/static/img/videoPlay.png" mode="aspectFill"
													class="video-icon"></image>
											</view>
											<!-- #endif -->
										</template>
									</view>
									<view class="picImg" v-if="item.addEvaluationUrl3">
										<image @tap.stop="previewImage(item.addEvaluationUrl3)"
											v-if="imgType.includes(item.addEvaluationUrl3.split('.')[item.addEvaluationUrl3.split('.').length-1])"
											:src="item.addEvaluationUrl3" class="tui-item-img pic"></image>
										<template v-else>
											<!-- #ifndef APP-PLUS -->
											<video :src="item.addEvaluationUrl3" :autoplay='false'
												:show-fullscreen-btn="true" show-center-play-btn controls
												class="tui-item-img pic"></video>
											<!-- #endif -->
											<!-- #ifdef APP-PLUS -->
											<view class="video-black" @tap="videoshow(item.addEvaluationUrl3)">
												<image class="black-img" :src="item.addEvaluationUrl3+'?x-oss-process=video/snapshot,t_0,f_jpg'" mode="aspectFill"></image>
												<image src="~@/static/img/videoPlay.png" mode="aspectFill"
													class="video-icon"></image>
											</view>
											<!-- #endif -->
										</template>
									</view>
								</view>
								<text class="time">{{item.addCommentDate}}</text>
							</view>
						</view>
					</view>

					<view v-if="item.evaluationReplyText" class="replay-wrap">
						<text>卖家回复：{{ item.evaluationReplyText }}</text>
					</view>
				</view>
			</view>
		</mescroll-uni>
		<!-- </view> -->
		<!-- <mix-empty v-else :type="'evalu'" :backgroundColor="'#fff'"></mix-empty> -->
		<!--app端视频播放-->
		<template v-if="videoPlay">
			<view class="mask-video" @tap="videoPlay = !videoPlay"></view>
			<video class="screen-video" :show-fullscreen-btn="false" :autoplay="true" controls id="myvideo"
				:src="videoUrl"></video>
		</template>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	import mixEmpty from '@/components/mix-empty/mix-empty.vue'
	import tuiButton from "@/components/button/button"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import mixin from "@/utils/mixin.js"
	export default {
		mixins: [mixin,MescrollMixin],
		components: {
			mixEmpty,
			tuiButton
		},
		data() {
			return {
				evaluationData: [
					// {
					// 	evaluationUrl1:'http://new-dr-mall.oss-cn-shanghai.aliyuncs.com/2021-04-08-eae4362b-a4b1-47ee-b878-9ac4f7bfc74e.jpeg'
					// }
				],
				imgType: ['jpg', 'jpeg', 'png', 'gif', 'JPG', 'JPEG', 'PNG', 'GIF'],
				productId: '',
				imgSrc: '',
				videoPlay: false,
				videoUrl: '',
				upOption: {
					auto: false, // 是否自动加载
					page: {
						size: 6 // 每页数据的数量,默认10
					},
					noMoreSize: 6, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					textNoMore: '-- 无更多信息 --',
				},
			}
		},
		onLoad(options) {
			// #ifdef H5
			this.$wechat.noShare();
			// #endif
			console.log(options)
			if (options.productId) {
				this.productId = options.productId
			}
			// this.mescroll.resetUpScroll();
		},
		methods: {
			// filters: {
			// 	username(name){
			// 		if(name.length === 11){
			// 			return '****' + name.substr(7, 11)
			// 		}else{
			// 			return name;
			// 		}
			// 	}
			// },
			//app端评价页视频播放
			videoshow(item) {
				//e 是通过点击事件拿到的视屏地址
				this.videoUrl = item;
				this.videoContext = uni.createVideoContext("myvideo", this);
				this.videoContext.requestFullScreen({
					direction: 0 //控制全屏的时候视屏旋转多少度 
				});
				this.videoContext.play();
				this.videoPlay = true; // 显示播放盒子
			},
			previewImage(item) {
				let imageList = []
				imageList.push(item)
				// if (!this.imageList.length) return;
				uni.previewImage({
					current: imageList[0],
					indicator: "none",
					// loop: true,
					urls: imageList
				})
			},
			// 获取评价内容
			getEvaluateList(page) {
				// this.$http.evaluationList(this.productId).then((res) => {
				// 	if (res.status === 0) {
				// 		console.log(res.data);
				// 		this.evaluationData = res.data
				// 	}
				// })
				let params={
					current:page.num,
					pageSize:page.size,
					// productId:this.productId,
				};
					this.$http.evaluationList(params,this.productId).then((res) => {
						if (res.status === 0) {
							
							let evaluationData =res.data.records;
							this.mescroll.endSuccess(res.data.records.length);
							if (page.num == 1) {
								this.evaluationData = []
							};
							this.evaluationData = this.evaluationData.concat(evaluationData);
							console.log(this.evaluationData)
						}
					}).catch(() => {
						this.mescroll.endErr()
					});
			},
			// mescrollInit(mescroll) {
			// 	this.mescroll = mescroll;
			// 	this.mescroll.resetUpScroll(false)
			// },
		}
	}
</script>

<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style scoped lang="scss">
	.mask-video {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 9999;
	}

	.screen-video {
		position: fixed;
		left: 50%;
		top: 50%;
		margin-top: -50%;
		margin-left: -50%;
		width: 100%;
	}

	.collection-list {
		width: 100%;
		overflow: hidden;
		position: relative;
		box-sizing: border-box;
		// padding-bottom: 20rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.video-black {
		width: 100%;
		height: 180rpx;
		// background: #000000;
		position: relative;
		.black-img {
			width: 100%;
			height: 100%;
		}
	}

	.video-icon {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -30rpx;
		margin-top: -30rpx;
	}

	.collection-item {
		position: relative;
		margin-bottom: 16rpx;
		background-color: #fff;
		padding-bottom: 20rpx;
	}

	.item-con {
		width: 100%;
		border-bottom: 1rpx solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 20rpx 10rpx 10px;
		;

		.item-left {
			padding: 10rpx;
			// border: 1px solid $borderColor;
			border-radius: 50%;
			display: flex;
			align-items: center;

			.nickName {
				margin-left: 20rpx;
			}

			// margin: 0 20rpx;
			.item-image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
			}
		}

		.item-right {
			margin-left: 20rpx;
			position: relative;

		}
	}

	.item-btns {
		width: 100%;
		padding: 10rpx 20rpx;
		display: flex;
		flex-direction: row-reverse;
	}

	.evaluationInfo {
		padding: 20rpx;
		border-bottom: 2rpx solid #ccc;
		margin: 10rpx;
	}

	.mix-rating-item {
		padding: 30rpx;

		&:last-child:after {
			border: 0;
		}
	}

	.wrap {
		display: flex;
	}

	.avatar-wrap {
		width: 80rpx;
		height: 80rpx;
		position: relative;

		.avatar {
			flex-shrink: 0;
			width: 100%;
			height: 100%;
			border-radius: 100px;
		}

		.crown {
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			z-index: 1;
			left: -16rpx;
			top: -14rpx;
			transform: rotate(0deg);
		}

		.mix-icon {
			position: absolute;
			right: 0;
			bottom: 0;
			font-size: 28rpx;
			color: #ffd600;
			border-radius: 100rpx;
			border: 2rpx solid #fff;
			background-color: #fff;
		}
	}

	.right {
		padding-left: 26rpx;

		.nickName {
			margin-right: 40rpx;
			font-size: 28rpx;
			color: #666;
		}

		.iconfont {
			margin-right: 6rpx;
			font-size: 28rpx;
			color: #ddd;

			&.active {
				color: #ffd600;
			}
		}

		.con {
			font-size: 28rpx;
			color: #333;
			padding: 20rpx 0;
			line-height: 1.4;
		}

		.bot {
			// justify-content: space-between;
			font-size: 24rpx;
			color: #999;
		}

		.attr {
			width: 350rpx;
			text-align: right;
		}
	}

	.pic-wrap {
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 8rpx;
		width: 100%;

		.picImg {
			width: 30%;
			height: 180rpx;
			margin: 0 12rpx 12rpx 0;
			border-radius: 8rpx;

			.pic {
				width: 100%;
				height: 100%;
			}

			&.no-mr {
				margin-right: 0;
			}
		}
	}

	.replay-wrap {
		display: flex;
		margin: 24rpx 0 0 100rpx;
		padding: 12rpx 20rpx;
		background-color: #f7f7f7;
		border-radius: 8rpx;

		text {
			font-size: 24rpx;
			color: #888;
			line-height: 1.6;
		}
	}

	.addData-wrap {
		// display: flex;
		padding: 12rpx 10rpx;
		color: #666666;
		font-size: 30rpx;

		text {
			font-size: 24rpx;
			color: #888;
			line-height: 1.6;
		}

		.addDataClass {
			margin-bottom: 5rpx;
		}
	}


	// }
</style>
